// 获取dom
const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
const batch = document.querySelector('#batch');



// 获取数据
function getover() {
    axios.get('/student/overview')
        .then((v) => {
            // 解构
            const { avgAge, avgSalary, proportion, total } = v.data.data;
            document.querySelector('.avgAge').innerText = avgAge;
            document.querySelector('.avgSalary').innerText = avgSalary;
            document.querySelector('.proportion').innerText = proportion;
            document.querySelector('.total').innerText = total;
        })
}
// 获取数据
getover()

// ============================================封装
// 获取全部学员信息
getStudentList()
function getStudentList(lister) {
    axios.get('/student/list').then((w) => {
        const lister = w.data.data;
        // 接收数组 渲染折线图
        getsarche(lister);
        // 籍贯饼图
        getsheng(lister);
    });
}
// =================================================封装



// 薪资数据
function getsarche(lister) {

    const salary = lister.map((w) => w.salary)//获取实际薪资
    const truesalary = lister.map((w) => w.truesalary)//期望薪资
    const names = lister.map((w) => w.name)//同学名单

    // ========================================================================================插件
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.line'));

    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '薪资'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {},

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: names
        },
        yAxis: {
            type: 'value',

        },

        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10
            },
            {
                start: 0,
                end: 10
            }
        ],
        series: [
            {
                name: 'Highest',
                type: 'line',
                symbol: 'circle',
                smooth: true,
                data: truesalary,

            },
            {
                name: 'Lowest',
                type: 'line',
                symbol: 'circle',
                smooth: true,
                data: salary,

            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function getsheng(lister) {

    const arr = []
    lister.forEach(w => {
        // h等于arr[]数组没有这个省就添加到空数组，有就做++
        const index = arr.findIndex((h) => h.name === w.province)
        if (index === -1) {
            // 没有找到就添加剂
            arr.push({ value: 1, name: w.province });
        } else {
            // arr数组里面value值做++
            // 找到了就给他值做++
            arr[index].value++;
        }
        const myChart = echarts.init(document.querySelector('.pie'));
        const option = {
            title: {
                text: '籍贯 HomeTown',
            },
            series: [
                {
                    name: '籍贯 HomeTown',
                    type: 'pie',
                    radius: [50, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8,
                    },
                    data: arr, // 处理后的数组
                },
            ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
}

// 获取数据按组
function getbutton() {
    axios.get('/score/batch?batch=2')
        .then((v) => {
            //    解构
            const { avgScore, group, gt60, gt80, lt60 } = v.data.data
            console.log(avgScore, group, gt60, gt80, lt60);
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector('.barChart'));

            // 指定图表的配置项和数据
            const option = {
                grid: {
                    top: 30,
                    bottom: 20,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['平均分',
                        '低于60分人数',
                        '60分-80分之间人数',
                        '高于80分的人数',]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: group,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} 分数'
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    }
                ],
                series: [
                    {
                        name: '平均分',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: avgScore,
                    },
                    {
                        name: '低于60分人数',
                        yAxisIndex: 1,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: lt60,
                    },
                    {
                        name: '60分-80分之间人数',
                        yAxisIndex: 1,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: gt60,
                    },
                    {
                        name: '高于80分的人数',
                        yAxisIndex: 1,
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: gt80,
                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })
}
getbutton(1)





// 绑定点击事件
toggleBatchBtn.addEventListener('click', function (e) {
    // 有就删除没有就添加
    batch.classList.toggle('show')
})


batch.addEventListener('click', function (e) {
    // 获取
    if (e.target.nodeName === 'A') {
        const index = e.target.dataset.index;
        // 根据第几次 来获取对应成绩
        getbutton(index);
    }
})